<template>
    <div id="render_singer_box">
            <div id="popular_box">
                <div   v-for="(item,index) in testdata " :key='index' style="display: inline-block;position: relative;">
                        <span>
                            <img  class='item_img' v-if='item.popular="1"' :src=item.src alt="">
                        </span>       
                        <div v-if='item.popular=="1"'  id="img_name">
                            <a  style="color:black" href="">{{item.name}}</a>                            
                        </div>
                </div>
            </div>
             <div id="dpopular_box" style="text-align: center;margin-top: 20px;">
                <div v-for="(item,index) in testdata " :key='index' style="display: inline-block;position: relative;text-align: center;">
                    <div style="margin: 0 20px 0 20px;" ><a style="color:black" href="">{{item.name}}</a></div>
                </div>
             </div>
    </div>
</template>

<script setup>
import { useRouter} from 'vue-router';
import { onMounted, ref } from 'vue';
let Router = useRouter()
let data = ref([])
let testdata = [{
    'name': 'test1',
    'pre_name':'test1',
    'sex': 'test1',
    'kind': 'test1',
    'area': 'test1',
    'popular':1 ,
    'src':'aa'   
},
{
    'name': 'test2',
    'sex': 'test2',
    'kind': 'test2',
    'area': 'test2',
    'popular': 0,
    'src':'aa' 
    },
{
    'name': 'test3',
    'sex': 'test3',
    'kind': 'test3',
    'area': 'test3',
    'popular':1 ,
    'src':''   
},{
    'name': 'test1dadada',
    'sex': 'test1',
    'kind': 'test1',
    'area': 'test1',
    'popular':1 ,
    'src':'aa'   
},
{
    'name': 'test2',
    'sex': 'test2',
    'kind': 'test2',
    'area': 'test2',
    'popular': 0,
    'src':'aa' 
    },
{
    'name': 'test3',
    'sex': 'test3',
    'kind': 'test3',
    'area': 'test3',
    'popular':1 ,
    'src':''   
},{
    'name': 'test1',
    'sex': 'test1',
    'kind': 'test1',
    'area': 'test1',
    'popular':1 ,
    'src':'aa'   
},
{
    'name': 'test2',
    'sex': 'test2',
    'kind': 'test2',
    'area': 'test2',
    'popular': 0,
    'src':'aa' 
    },
    {
    'name': 'test1',
    'sex': 'test1',
    'kind': 'test1',
    'area': 'test1',
    'popular':1 ,
    'src':'aa'   
},
{
    'name': 'test2',
    'sex': 'test2',
    'kind': 'test2',
    'area': 'test2',
    'popular': 0,
    'src':'aa' 
    },
{
    'name': 'test3',
    'sex': 'test3',
    'kind': 'test3',
    'area': 'test3',
    'popular':1 ,
    'src':''   
},{
    'name': 'test1',
    'sex': 'test1',
    'kind': 'test1',
    'area': 'test1',
    'popular':1 ,
    'src':'aa'   
},
{
    'name': 'test2',
    'sex': 'test2',
    'kind': 'test2',
    'area': 'test2',
    'popular': 0,
    'src':'aa' 
    },
{
    'name': 'test3',
    'sex': 'test3',
    'kind': 'test3',
    'area': 'test3',
    'popular':1 ,
    'src':''   
},{
    'name': 'test1',
    'sex': 'test1',
    'kind': 'test1',
    'area': 'test1',
    'popular':1 ,
    'src':'aa'   
},
{
    'name': 'test2',
    'sex': 'test2',
    'kind': 'test2',
    'area': 'test2',
    'popular': 0,
    'src':'aa' 
    },

]


onMounted(() => { 
  
})

</script>

<style  scoped>
.item_img{
    height: 120px;
    width: 120px;
    border-radius: 60px;
    margin: 5px 30px 5px 30px;
    background-color: black;
}
span{
    display: inline-block;
}

#img_name{
    height: 18px;
    line-height: 18px;
    font-size: 18px;
    text-align: center;
    margin:0 auto;
    margin-top: 5px;
}


#popular_box{
    text-align: center;
}

</style>
